<template>
  <div id="assoModel">
    <!-- 标题 -->
    <div class="addOptions title-container">
      <div
        class="grid-content title-gap"
        v-for="title in titleList"
        :key="title.label"
        :class="title.class"
      >
        <span>{{ title.label }}</span>
      </div>
    </div>
    <!-- 内容 -->
    <div class="addOptions">
      <div
        v-for="(itemData, itemIndex) in tableData"
        :key="itemData.value"
        class="container"
        :class="{ 'remove-line': tableData.length == 1 }"
      >
        <content-table
          :tableData="tableData"
          :itemData="itemData"
          :itemIndex="itemIndex"
        ></content-table>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="addOptinons">添加关联条件</el-button>
    </div>
  </div>
</template>

<script>
import ContentTable from "./content";
export default {
  components: {
    ContentTable,
  },
  data() {
    return {
      titleList: [
        {
          label: "数据集字段",
          class: "title-dataSet",
        },
        {
          label: "关联方式",
          class: "type",
        },
        {
          label: "关联维表名",
          class: "title-tableName",
        },
        {
          label: "关联字段",
          class: "fields",
        },
        {
          label: "操作",
          class: "handle",
        },
      ],
      tableData: [
        {
          dataSet: {
            name: "data-set",
            class: "dataSet",
            data: [
              {
                label: "商品ID",
                value: "id",
              },
              {
                label: "价格",
                value: "price",
              },
              {
                label: "数量",
                value: "number",
              },
            ],
          },
          type: {
            name: "type",
            class: "mode",
            data: ["关联方式"],
          },

          table: {
            name: "tables",
            class: "tables",
            data: [
              {
                label: "airbnb_listings",
                value: "airbnb_listings",
              },
              {
                label: "aipl_user_online",
                value: "aipl_user_online",
              },
              {
                label: "airbnb_calendar",
                value: "airbnb_calendar",
              },
            ],
          },
          field: {
            name: "field",
            class: "fields",
            data: [
              {
                label: "date",
                value: "date",
              },
              {
                label: "listing_id",
                value: "listing_id",
              },
              {
                label: "price",
                value: "price",
              },
            ],
          },
          delete: {
            name: "delete",
            class: "delete",
          },
        },
      ],
    };
  },
  methods: {
    addOptinons() {
      this.tableData.push({
        dataSet: {
          name: "data-set",
          class: "dataSet",
          data: [
            {
              label: "商品ID",
              value: "id",
            },
            {
              label: "价格",
              value: "price",
            },
            {
              label: "数量",
              value: "number",
            },
          ],
        },
        type: {
          name: "type",
          class: "mode",
        },
        table: {
          name: "tables",
          class: "tables",
        },
        field: {
          name: "field",
          class: "fields",
          data: [
            {
              label: "date",
              value: "date",
            },
            {
              label: "listing_id",
              value: "listing_id",
            },
            {
              label: "price",
              value: "price",
            },
          ],
        },
        delete: {
          name: "delete",
          class: "delete",
        },
      });
    },
  },
};
</script>

<style scoped>
#assoModel {
  min-height: 500px;
}
#assoModel .addOptions .container {
  padding: 2px 10px;
  display: flex;
  flex-wrap: nowrap;
  border: none;
}

#assoModel .addOptions {
  position: relative;
  height: auto;
}
#assoModel .grid-content {
  display: inline-block;
  height: auto;
}
#assoModel .title-container {
  padding: 5px 10px;
  display: flex;
  flex-wrap: nowrap;
  /* justify-content: space-around; */
}
#assoModel .grid-content.dataSet {
  width: 23%;
  text-align: center;
}
#assoModel .grid-content.title-dataSet {
  width: 23%;
  text-align: center;
}
#assoModel .grid-content.type {
  width: 10%;
  text-align: center;
}
#assoModel .grid-content.tableName {
  width: 24%;
  text-align: center;
}
#assoModel .grid-content.title-tableName {
  width: 24%;
  text-align: center;
}
#assoModel .grid-content.fields {
  width: 16%;
  text-align: center;
}
#assoModel .grid-content.handle {
  width: 10%;
  text-align: center;
}
#assoModel .title-gap {
  margin-right: 30px;
}
#assoModel .el-select {
  width: 100%;
}
#assoModel .grid-content.mode {
  width: 10%;
  height: calc(100% - 20px);
  text-align: center;
}

#assoModel .grid-content.tables {
  width: 24%;
  height: calc(100% - 20px);
  text-align: center;
}

#assoModel .footer {
  padding: 10px;
}
#assoModel .footer .el-button--primary {
  width: 100%;
  background-color: #476dbe;
  border-color: #476dbe;
}
</style>
<style >
.remove-line.container:last-child
  #add-relation
  .el-input.el-input--suffix:after {
  width: 0px;
}
.remove-line.container:last-child #field .el-input.el-input--suffix:before {
  width: 0px;
}
</style>
